//css3属性
//---------------------------------------------------
//  LESS Prefixer
//---------------------------------------------------
//
//  All of the CSS3 fun, none of the prefixes!
//
//  As a rule, you can use the CSS properties you
//  would expect just by adding a ‘@mixin ‘:
//
//  box-shadow => @mixin box-shadow($args)
// 
//  Also, when shorthand is available, arguments are
//  not parameterized@mixin  Learn CSS, not LESS Prefixer@mixin 
//
//  -------------------------------------------------
//  TABLE OF CONTENTS
//  (*) denotes a syntax-sugar helper
//  -------------------------------------------------
//
//      @mixin keyframes($name; $args)
//      @mixin animation($args)
//          @mixin animation-delay($delay)
//          @mixin animation-direction($direction)
//          @mixin animation-duration($duration)
//          @mixin animation-fill-mode($mode)
//          @mixin animation-iteration-count($count)
//          @mixin animation-name($name)
//          @mixin animation-play-state($state)
//          @mixin animation-timing-function($function)
//      @mixin background-size($args)
//      @mixin border-radius($args)
//      @mixin box-shadow($args)
//          @mixin inner-shadow($args) *
//      @mixin box-sizing($args)
//          @mixin border-box() *
//          @mixin content-box() *
//      @mixin columns($args)
//          @mixin column-count($count)
//          @mixin column-gap($gap)
//          @mixin column-rule($args)
//          @mixin column-width($width)
//      @mixin gradient($default,$start,$stop) *
//          @mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
//          @mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
//      @mixin keyframes($name; $args)
//      @mixin opacity($factor)
//      @mixin transform($args)
//          @mixin transform-origin($args)
//          @mixin transform-style($style)
//          @mixin rotate($deg)
//          @mixin scale($factor)
//          @mixin translate($x,$y)
//          @mixin translate3d($x,$y,$z)
//          @mixin translateHardware($x,$y) * 
//      @mixin text-shadow($args)
//      @mixin transition($args)
//          @mixin transition-delay($delay)
//          @mixin transition-duration($duration)
//          @mixin transition-property($property)
//          @mixin transition-timing-function($function)
//      Flexbox: 
//          @mixin flex-block()
//          @mixin flex-inline()
//              @mixin flex-flow($direction: row, $wrap: nowrap)
//                  @mixin flex-direction($direction: row)
//                  @mixin flex-wrap($wrap: nowrap)
//              @mixin justify-content($justification)
//              @mixin align-items($mode) 
//              @mixin align-content($alignment)
//              @mixin flex($args: none)
//                  @mixin flex-grow($grow: 1)
//                  @mixin flex-shrink($shrink: 1)
//                  @mixin flex-basis($basis: auto)
//              @mixin order($num: 0)
//              @mixin align-self($align: auto)
//
//  Credit to LESS Elements for the motivation and
//  to CSS3Please@mixin com for implementation@mixin 
//
//  Copyright (c) 2012 Joel Sutherland
//  MIT Licensed:
//  http://www@mixin opensource@mixin org/licenses/mit-license@mixin php
// 
//---------------------------------------------------
  

// Animation
/*
linear 速度稳定
infinite 无限循环
forwards 停在最后一帧
*/


@mixin animation($args) {
    -webkit-animation: $args;
    animation: $args;
}
@mixin animation-delay($delay) {
    -webkit-animation-delay: $delay;
    animation-delay: $delay;
}
@mixin animation-direction($direction) {
    -webkit-animation-direction: $direction;
    -o-animation-direction: $direction;
}
@mixin animation-duration($duration) {
    -webkit-animation-duration: $duration;
    -o-animation-duration: $duration;
}
@mixin animation-fill-mode($mode) {
    -webkit-animation-fill-mode: $mode;
    animation-fill-mode: $mode;
}
@mixin animation-iteration-count($count) {
    -webkit-animation-iteration-count: $count;
    animation-iteration-count: $count;
}
@mixin animation-name($name) {
    -webkit-animation-name: $name;
    animation-name: $name;
}
@mixin animation-play-state($state) {
    -webkit-animation-play-state: $state;
    animation-play-state: $state;
}
@mixin animation-timing-function($function) {
    -webkit-animation-timing-function: $function;
    animation-timing-function: $function;
}


// Background Size

@mixin background-size($args) {
    background-size: $args;
}


// Border Radius

@mixin border-radius($args) {
    border-radius: $args;
    background-clip: padding-box;
}


// Box Shadows

@mixin box-shadow($args) {
    -webkit-box-shadow: $args;
    box-shadow: $args;
}
@mixin inner-shadow($args) {
    @include box-shadow(inset $args);
}


// Box Sizing

@mixin box-sizing($args) {
    -webkit-box-sizing: $args;
    -moz-box-sizing: $args;
    box-sizing: $args;
}
@mixin border-box(){
    @include box-sizing(border-box);
}
@mixin content-box(){
    @include box-sizing(content-box);
}


// Columns
//@mixin columns(100px 4); 列的宽度和数量
@mixin columns($args) { 
    -webkit-columns: $args;
    -moz-columns: $args;
    columns: $args;
}
//列的数量
@mixin column-count($count) {
    -webkit-column-count: $count;
    -moz-column-count: $count;
    column-count: $count;
}
//列距离
@mixin column-gap($gap) {
    -webkit-column-gap: $gap;
    -moz-column-gap: $gap;
    column-gap: $gap;
}
@mixin column-width($width) {
    -webkit-column-width: $width;
    -moz-column-width: $width;
    column-width: $width;
}
//column-rule:4px outset #ff0000;列距离的 颜色宽度 样式 
@mixin column-rule($args) {
    -webkit-column-rule: $args;
    -moz-column-rule: $args;
    column-rule: $args;
}


// Gradients
//   filter:progid:DXImageTransform@mixin Microsoft@mixin gradient(startColorstr=$start ,endColorstr=$end ,grandientType=0);
@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
    @include linear-gradient-top($default,$start,0%,$stop,100%);
}
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
}
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
} 
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4,$color5,$stop5) {
    background-color: $default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4), color-stop($stop5 $color5));
    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4, $color5 $stop5);
    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4, $color5 $stop5);
    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4, $color5 $stop5);
    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4, $color5 $stop5);
    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4, $color5 $stop5);
}

// Opacity

@mixin opacity($factor) {
    $iefactor: $factor*100;
    opacity: $factor;
}
@mixin filter($a:100%){
 -webkit-filter: grayscale($a); 
-moz-filter: grayscale($a); 
-ms-filter: grayscale($a); 
-o-filter: grayscale($a); 
filter: grayscale($a); 
filter: gray; 
}


// Text Shadow

@mixin text-shadow($args) {
    text-shadow: $args;
}


// Transforms
 
@mixin transform($args) {
    -webkit-transform: $args;
    -ms-transform: $args;
    transform: $args;
}
@mixin transform-origin($args) {
    -webkit-transform-origin: $args;
    -ms-transform-origin: $args;
    transform-origin: $args;
}
@mixin transform-style($style) {
    -webkit-transform-style: $style;
    -ms-transform-style: $style;
    transform-style: $style;
}
@mixin rotate($deg:45deg){
    @include transform(rotate($deg));
}
/*水平翻转*/
@mixin rotateY($deg:360deg){ transform: rotateY($deg); }

/*垂直翻转*/
@mixin rotateX($deg:360deg){ transform: rotateX($deg); }

@mixin scale($factor:5){
    @include transform(scale($factor));
}
@mixin translate($x,$y){
    @include transform(translate($x,$y));
}
@mixin translate3d($x,$y,$z) {
    @include transform(translate3d($x,$y,$z));
}
@mixin translateHardware($x,$y) {
    @include translate($x,$y);
    -webkit-transform: translate3d($x,$y,0);
    -o-transform: translate3d($x,$y,0);
    transform: translate3d($x,$y,0);
}


// Transitions

@mixin transition($args:200ms) {
    transition: $args;
        -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
}
@mixin transition-delay($delay:0) {
    transition-delay: $delay;
}
@mixin transition-duration($duration:200ms) {
    transition-duration: $duration;
}
@mixin transition-property($property:all) { 
    transition-property: $property;
}
@mixin transition-timing-function($function:ease) {
    transition-timing-function: $function;
}
//视角
@mixin perspective($size:500){
    perspective: $size;
    -webkit-perspective: $size; /* Safari 和 Chrome */
}

// Flexbox
@mixin flex-block() {
    display: box;              /* OLD - Android 4@mixin 4- */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3@mixin 1-6 */
    display: -moz-box;   
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin flex-inline() {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
@mixin flex-flow($direction: row, $wrap: nowrap) {//flex-direction属性和flex-wrap属性的简写形式
    -moz-flex-flow: $direction $wrap;
    -ms-flex-direction: $direction;
    -ms-flex-wrap: $wrap;
    -webkit-flex-flow: $direction $wrap;
    flex-flow: $direction $wrap;
}
@mixin align-content($alignment) { //多根轴线对齐align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    -moz-align-content: $alignment;
    -ms-align-content: $alignment;
    -webkit-align-content: $alignment;
    align-content: $alignment;
}
@mixin flex-direction($direction: row) { //主轴的方向  row | row-reverse 右 | column 垂直上 | column-reverse; 垂直下
    
    -webkit-flex-direction: $direction;
    -moz-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}
@mixin flex-wrap($wrap: nowrap) {//换行nowrap | wrap | wrap-reverse;换行在最下方开始

     -webkit-box-lines: multiple;
    -webkit-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    flex-wrap: $wrap;
}
@mixin justify-content($justification) {//对齐方式flex-start 左边| flex-end 右边 | center | space-between 2边| space-around; 项目间隔相等
    -webkit-box-pack: $justification;
    -moz-box-pack: $justification;
    -ms-flex-pack: replace($justification, "flex-", "");
    -webkit-justify-content: $justification;
    justify-content: $justification;
}
@mixin align-items($mode) {//对齐方式flex-start 上| flex-end  下| center | baseline  第一行文字对齐| stretch; 默认沾满高度
    -webkit-box-align: $mode;
    -moz-box-align: $mode;
    -ms-flex-align: $mode;
    -webkit-align-items: $mode;
    align-items: $mode;
}
@mixin flex($args: none) {
    -moz-box-flex: $args; /* Firefox */
    -webkit-box-flex: $args; /* Safari 和 Chrome */
    box-flex: $args;
    -webkit-flex: $args; 
    -moz-flex: $args;
    -ms-flex: $args;
    -webkit-flex: $args;
    flex: $args;
}
@mixin order($order: 0) {
    -webkit-box-ordinal-group: $order;
    -moz-box-ordinal-group: $order;
    -ms-box-ordinal-group: $order;
    -ms-flex-order: $order;
    -webkit-order: $order;
    -moz-order: $order;
    -ms-order: $order;
    order: $order;
}
@mixin flex-grow($grow: 1) {
    -webkit-flex-grow: $grow;
    -moz-flex-grow: $grow;
    -ms-flex-grow: $grow;
    -webkit-flex-grow: $grow;
    flex-grow: $grow;
}
@mixin flex-shrink($shrink: 1) {
    -webkit-flex-shrink: $shrink;
    -moz-flex-shrink: $shrink;
    -ms-flex-shrink: $shrink;
    -webkit-flex-shrink: $shrink;
    flex-shrink: $shrink;
}
@mixin flex-basis($basis: auto) {
    -webkit-flex-basis: $basis;
    -moz-flex-basis: $basis;
    -ms-flex-basis: $basis;
    -webkit-flex-basis: $basis;
    flex-basis: $basis;
}
@mixin align-self($align: auto) {
    -webkit-align-self: $align;
    -moz-align-self: $align;
    -ms-align-self: $align;
    -webkit-align-self: $align;
    align-self: $align;
}


